// Double circular barplot 代码
var clicked = null
// 全局变量
var data
const margin = { top: 100, right: 0, bottom: 0, left: 0 },
  width = 560 - margin.left - margin.right,
  height = 660 - margin.top - margin.bottom,
  // 内外径
  innerRadius = 140,
  outerRadius = Math.min(width, height) / 2 - 50;

const cc_color = "#002FA7";
const loyal_color = "#81D8CF";

document.addEventListener('DOMContentLoaded', function () {
  d3.csv("data/popularlocationdata.csv").then(function (values) {
    data = values;
    drawCircularBarPlot();
  });
});

function interaction(event, d) {
  var seldrop = d3.select("#dropdownloc")

  if (clicked == null) {
    d3.selectAll('.cc_bars').style('stroke-width', 1)
    d3.select("#" + event.target.id).style("stroke-width", 3);
    d3.selectAll(".box_circles").style("opacity", 0.1);

    d3.selectAll('#box_' + location_index[d.location]).style("opacity", 1);
    clicked = event.target.id;
    seldrop.property('value', d.location);
    seldrop = document.querySelector("#dropdownloc");
    seldrop.dispatchEvent(new Event('change'));
  }
  else {
    d3.selectAll('.cc_bars').style('stroke-width', 1)
    d3.selectAll(".box_circles").style("opacity", 0.1);
    if (clicked != event.target.id) {
      d3.select("#" + clicked).style("stroke-width", 1);
      d3.select("#" + event.target.id).style("stroke-width", 3);
      d3.selectAll('#box_' + location_index[d.location]).style("opacity", 1);
      clicked = event.target.id;
      seldrop.property('value', d.location);
      seldrop = document.querySelector("#dropdownloc");
      seldrop.dispatchEvent(new Event('change'));
    }
    else {
      d3.selectAll(".box_circles").style("opacity", 1);
      d3.select("#" + clicked).style("stroke-width", 1);
      clicked = null;
      seldrop.property('value', 1);
      seldrop = document.querySelector("#dropdownloc");
      seldrop.dispatchEvent(new Event('change'));
    }

  }

}
function drawCircularBarPlot() {
  // 初始化svg
  var svg = d3.select("#circular_bar_svg")
  svg = svg.append("g")
    .attr("transform", `translate(${width / 2 + margin.left}, ${height / 2 + margin.top})`);

  // 图例大小
  const lable_sq_size = 18;

  // 图例部分
  svg.append("rect")
    .attr("x", -width / 2 + 60)
    .attr("y", -(height / 2) - 50)
    .attr("width", lable_sq_size)
    .attr("height", lable_sq_size)
    .attr("fill", cc_color)

  svg.append("rect")
    .attr("x", -width / 2 + 60)
    .attr("y", -(height / 2) - 20)
    .attr("width", lable_sq_size)
    .attr("height", lable_sq_size)
    .attr("fill", loyal_color)

  svg.append("text")
    .text("信用卡交易次数")
    .attr("x", -width / 2 + 85)
    .attr("y", -(height / 2) - 37)
    .style("font-size", "13px")
    .attr("alignment-baseline", "middle");

  svg.append("text")
    .text("会员卡交易次数")
    .attr("x", -width / 2 + 85)
    .attr("y", -(height / 2) - 7)
    .style("font-size", "13px")

  // X scale: 常用于2个数据系列
  const x = d3.scaleBand()
    .range([0, 2 * Math.PI])
    .align(0)
    .domain(data.map(d => d.location)); // X轴的域是状态列表

  // Y scale
  const y = d3.scaleRadial()
    .range([innerRadius, outerRadius])   // 从内径到外径
    .domain([1, 220]); // Y的域从2到数据中的最大值

  // 计算内层条形图的y值
  const ybis = d3.scaleRadial()
    .range([innerRadius, 3])
    .domain([1, 220]);

  // 光标触碰显示提示框
  var tooltip = d3.select("#left-circular-div")
    .append("div")
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "rgb(237, 246, 249)")
    .style("color", "black")
    .style("border", "solid")
    .style("border-width", "0px")
    .style("border-radius", "5px")
    .style("padding", "5px")
    .style("position", "absolute");

  // 外层条形图
  svg
    .selectAll(".cc_bars")
    .data(data)
    .join("path")
    .attr("fill", cc_color)
    .attr("class", "cc_bars")
    .attr("id", d => "bar_" + location_index[d.location])
    .style("opacity", 0.8)
    .style('stroke', "black")
    .style('stroke-width', 0)
    .attr("d", d3.arc()
      .innerRadius(innerRadius)
      .outerRadius(d => y(d['cc_count']))
      .startAngle(d => x(d.location))
      .endAngle(d => x(d.location) + x.bandwidth())
      .padAngle(0.015)
      .padRadius(innerRadius))
    .on("mouseover", function (_, d) {
      tooltip.style("opacity", 1);
      d3.select(this).style("opacity", 1);
    })
    .on("mouseout", function (_, d) {
      tooltip.html("").style("opacity", 0);
      d3.select(this).style("opacity", 0.7);
    })
    .on("mousemove", function (event, d) {
      d3.select(this).style("opacity", 1);
      tooltip.html('总交易次数: ' + d['cc_count'] + '次' + '<br>' + '地点: ' + d.location)
        .style("left", event.clientX + window.scrollX + 20 + "px")
        .style("top", event.clientY + window.scrollY - 20 + "px");
    })
    .on("click", (event, d) => interaction(event, d))

  // 最外层每个条形图的标签
  svg
    .selectAll("g")
    .data(data)
    .join("g")
    .attr("text-anchor", function (d) { return (x(d.location) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "end" : "start"; })
    .attr("transform", function (d) { return "rotate(" + ((x(d.location) + x.bandwidth() / 2) * 180 / Math.PI - 90) + ")" + "translate(" + (y(d['cc_count']) + 10) + ",0)"; })
    .append("text")
    .text(d => d.location)
    .attr("transform", function (d) { return (x(d.location) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "rotate(180)" : "rotate(0)"; })
    .style("font-size", "13px")
    .attr("alignment-baseline", "middle")

  // 内层的条形图
  svg
    .selectAll(".lc_bars")
    .data(data)
    .join("path")
    .attr("fill", loyal_color)
    .attr("class", "lc_bars")
    .attr("id", d => "bar_u" + location_index[d.location])
    .style("opacity", 0.7)
    .style('stroke', "black")
    .style('stroke-width', 1)
    .attr("d", d3.arc()
      .innerRadius(d => ybis(0))
      .outerRadius(d => ybis(d['loyalty_count']))
      .startAngle(d => x(d.location))
      .endAngle(d => x(d.location) + x.bandwidth())
      .padAngle(0.01)
      .padRadius(innerRadius))
    .on("mouseover", function (_, d) {
      tooltip.style("opacity", 1);
      d3.select(this).style("opacity", 1);
    })
    .on("mouseout", function (_, d) {
      tooltip.html("").style("opacity", 0);
      d3.select(this).style("opacity", 0.7);
    })
    .on("mousemove", function (event, d) {
      tooltip.html('总交易次数: ' + d['loyalty_count'] + '<br>' + '地点: ' + d.location)
        .style("left", event.clientX + window.scrollX + 20 + "px")
        .style("top", event.clientY + window.scrollY - 20 + "px");
    });

}


